<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.ui.widget.js"></script> 
    <script src="jquery.fileupload.js"></script> 
	<script src="jquery.cookie.js"></script> 
    <style>
		.thumbnail{ display:table; width:120px;height:120px;line-height: 120px;position:relative;}
		.thumbnail img{display:inline-block;max-width:120px;max-height:120px; vertical-align: middle;}
		
		.progress {position: absolute;margin-bottom:0px; left: 0; top: 50%; width:100%; height:18px;margin-top: -9px;background-color: rgba(0,0,0,0.5);}
		.progress-bar{line-height: 18px;font-size: 12px;text-align:center;color: white;width: 100%;}

		.deleteBtn {position: absolute;top:3px;right:3px;background-image: url(../images/remove.gif);background-size: contain;width:16px;height:16px;cursor: pointer;}
		.deleteBtn:hover{border: 1px solid #0066CC}
		
		#uploadFileInput{display: none; }
		.upFileBtn {cursor:pointer; width:80px; height:30px;} 
    </style>
</head>
<body style="margin: 0px;">
 	<form enctype="multipart/form-data" method="post">
		<input type="hidden" name="ECWEB-JWTSSO-TOKEN" id="jwtToken"/>
		<div style="text-align: right;border-top: 1px solid #ddd;margin-top:10px;padding-top: 10px;padding-bottom: 10px;">
			<input type="file" name="file" multiple id="uploadFileInput" accept="image/png,image/jpg,image/bmp,image/JPEG" />
			<input id="selectFileBtn" class="upFileBtn" value="选择图片" type="button" onclick="document.getElementById('uploadFileInput').click()" />
			
			<input class="upFileBtn" value="开始上传" type="button" onclick="doUploadFile();" />
		</div>
		
		<div id="imgGroup" style="border: 1px solid #ddd;height:420px;overflow-y: auto;">
		</div>
	 </form>
   
    <script>
		var href = location.href;
		var filebrowserImageUploadUrl = decodeURIComponent(href.substring(href.indexOf("&filebrowserImageUploadUrl=")+27));
		$("#selectFileBtn").focus();
		
		var jwtToken = $.cookie("ECWEB-JWTSSO-TOKEN");
		$("#jwtToken").val(jwtToken);
		
        $("#uploadFileInput").fileupload({
            url: filebrowserImageUploadUrl, 
            async: false,
			autoUpload : false,
            add: function (e, data) {
				//data.submit();
				var ckeditorMultiImgs = window.parent.ckeditorMultiImgs || [];
				ckeditorMultiImgs.push(data);
				window.parent.ckeditorMultiImgs = ckeditorMultiImgs;
				
				var imgId = uuid();
				var img = $("<div style='margin:5px;float:left;border: 1px solid #ddd;'><span class='thumbnail'><img alt='图片预览' id='"+imgId+"' src='' />"+
					"<span class='deleteBtn' onclick='deleteImg(\""+imgId+"\");'></span>"+
					"<div class='progress'><div class='progress-bar' id='progress-bar' aria-valuemin='0' aria-valuemax='100'>准备上传</div></div></span></div>");
				$("#imgGroup").append(img);
				
				showTheImg(data,imgId)
				data.imgId = imgId
            },
			
			done: function (e, data) {
				var ckeditorMultiImgs = window.parent.ckeditorMultiImgs || [];
				for(var i=0;i<ckeditorMultiImgs.length;i++){
					if(ckeditorMultiImgs[i].imgId == data.imgId){
						ckeditorMultiImgs.splice(i--,1); 
						break;
					}	
				}
				window.parent.ckeditorMultiImgs = ckeditorMultiImgs;
				
                if (data.result.uploaded == "1") {
					var uploadedImgs = window.parent.uploadedImgs || [];
					uploadedImgs.push(data.result.url);
					window.parent.uploadedImgs = uploadedImgs;
					
					$("#"+data.imgId).prop("src",data.result.url);
					$("#"+data.imgId).parent().children(".progress").children(".progress-bar").html("上传成功");
	            } else {
					$("#"+data.imgId).parent().children(".progress").children(".progress-bar").html(data.result.url);
                }
				
				if(ckeditorMultiImgs.length>0){
					$("#"+ckeditorMultiImgs[0].imgId).parent().children(".progress").children(".progress-bar").html("正在上传...");
					
					window.setTimeout(function(){ doUploadFile()},0);;
				}
           }
        });
		
		function doUploadFile(){
			var ckeditorMultiImgs = window.parent.ckeditorMultiImgs || [];
			
			if(ckeditorMultiImgs.length>0){
				$("#"+ckeditorMultiImgs[0].imgId).parent().children(".progress").children(".progress-bar").html("正在上传...");
				ckeditorMultiImgs[0].submit();
			}
		}
		
		function showTheImg(obj,imgId) {
		   var file = obj.files[0];
		  
		   var reader = new FileReader();
			reader.onload = function (e) {
			 var img = document.getElementById(imgId);
			  img.src = e.target.result;
		   }
		   reader.readAsDataURL(file);
		}
		function uuid() {
			var s = [];
			var hexDigits = "0123456789abcdef";
			for (var i = 0; i < 36; i++) {
				s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			}
			s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
			s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
			s[8] = s[13] = s[18] = s[23] = "";

			var uuid = s.join("");
			return uuid;
		}
		
		function deleteImg(imgId){
			$("#"+imgId).closest("DIV").remove();
		}
    </script>
</body>
</html>